<!--
3D转换：透视
    - 现实电影院中，人眼必须借助3D眼镜物品，才能看到3D效果
    - 3D转换中的电脑世界中，透视就相当于【电脑中的人类的眼睛】，帮助人类看到【电脑世界立体效果】
    
    - 只有通过透视，才能观察的z轴，观察到近大远小的效果

    补充一句：再配合后面学的【3D呈现  transfrom-style】，观察效果会更加明显
    
    - 平面中的近大远小的立体效果，是二维的
    - 想要网页产生3D效果，需要透视
    - 透视，也称为视距：眼睛到屏幕的距离。单位：px。
    - 近大远小
        视距越近，成像越大；视距越远，成像越小

手电筒照物体

透视：给被观察元素的父盒子添加！
z轴：给被观察的元素添加！
    人眼到屏幕的距离  【视距：d】  近大远小
    物品到屏幕的距离  【z轴：z】   z正值越大（物品离眼睛越近，即离屏幕越远），看到的物品越大

    补充：自己调试d、z的值
          先给d设置任意值，然后z从0开始调试增加
          d太大太小、或z太大太小：可能观察不到，也许都飞出视网膜成像范围以外了
    总之，d、z都会影响观察到的大小，也都是近大远小。
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* 给父盒子添加透视（视距） */
  body {
    perspective: 100px;
  }
  /* 被观察的元素 */
  div {
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: cyan;
    /* transform: translate3d(0, 0, 0px); */
    transform: translateZ(0px);
  }
</style>

<div></div>
